<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康记录详情 - 宠物医院管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-2 p-0">
                <%@ include file="../common/user-sidebar.jsp" %>
            </div>

            <!-- 主内容区域 -->
            <div class="col-md-10">
                <div class="main-content p-4">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">健康记录详情</h1>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <a href="${pageContext.request.contextPath}/health/my-records" class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-arrow-left"></i> 返回我的记录
                        </a>
                    </div>
                </div>

                <!-- 健康记录详情 -->
                <div class="row">
                    <div class="col-lg-8">
                        <!-- 基本信息 -->
                        <div class="card mb-4">
                            <div class="card-header bg-primary text-white">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-info-circle"></i> 基本信息
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <table class="table table-borderless">
                                            <tr>
                                                <td class="fw-bold text-muted" style="width: 120px;">记录编号：</td>
                                                <td class="fw-bold">#${healthRecord.recordId}</td>
                                            </tr>
                                            <tr>
                                                <td class="fw-bold text-muted">宠物姓名：</td>
                                                <td class="fw-bold text-primary">${healthRecord.pet.petName}</td>
                                            </tr>
                                            <tr>
                                                <td class="fw-bold text-muted">宠物类型：</td>
                                                <td>${healthRecord.pet.petType} - ${healthRecord.pet.breed}</td>
                                            </tr>
                                            <tr>
                                                <td class="fw-bold text-muted">就诊日期：</td>
                                                <td class="fw-bold">
                                                    <fmt:formatDate value="${healthRecord.visitDate}" pattern="yyyy年MM月dd日"/>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="col-md-6">
                                        <table class="table table-borderless">
                                            <tr>
                                                <td class="fw-bold text-muted" style="width: 120px;">主治医生：</td>
                                                <td>
                                                    <c:choose>
                                                        <c:when test="${not empty healthRecord.doctorName}">
                                                            <span class="fw-bold">${healthRecord.doctorName}</span>
                                                        </c:when>
                                                        <c:otherwise>
                                                            <span class="text-muted">未填写</span>
                                                        </c:otherwise>
                                                    </c:choose>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="fw-bold text-muted">治疗费用：</td>
                                                <td>
                                                    <c:choose>
                                                        <c:when test="${not empty healthRecord.cost}">
                                                            <span class="text-success fw-bold fs-5">
                                                                ¥<fmt:formatNumber value="${healthRecord.cost}" pattern="#,##0.00"/>
                                                            </span>
                                                        </c:when>
                                                        <c:otherwise>
                                                            <span class="text-muted">未填写</span>
                                                        </c:otherwise>
                                                    </c:choose>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="fw-bold text-muted">复诊日期：</td>
                                                <td>
                                                    <c:choose>
                                                        <c:when test="${not empty healthRecord.nextVisitDate}">
                                                            <span class="fw-bold">
                                                                <fmt:formatDate value="${healthRecord.nextVisitDate}" pattern="yyyy年MM月dd日"/>
                                                            </span>
                                                            <c:if test="${healthRecord.needsFollowUp()}">
                                                                <span class="badge bg-warning ms-2">
                                                                    <i class="fas fa-bell"></i> 需要复诊
                                                                </span>
                                                            </c:if>
                                                        </c:when>
                                                        <c:otherwise>
                                                            <span class="text-success">
                                                                <i class="fas fa-check-circle"></i> 无需复诊
                                                            </span>
                                                        </c:otherwise>
                                                    </c:choose>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="fw-bold text-muted">记录时间：</td>
                                                <td>
                                                    <fmt:formatDate value="${healthRecord.createTime}" pattern="yyyy-MM-dd HH:mm"/>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 症状描述 -->
                        <div class="card mb-4">
                            <div class="card-header bg-warning text-dark">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-stethoscope"></i> 症状描述
                                </h5>
                            </div>
                            <div class="card-body">
                                <c:choose>
                                    <c:when test="${not empty healthRecord.symptoms}">
                                        <div class="alert alert-light border-start border-warning border-4">
                                            <p class="mb-0" style="white-space: pre-wrap; line-height: 1.6;">${healthRecord.symptoms}</p>
                                        </div>
                                    </c:when>
                                    <c:otherwise>
                                        <p class="text-muted text-center py-3 mb-0">
                                            <i class="fas fa-info-circle"></i> 暂无症状描述
                                        </p>
                                    </c:otherwise>
                                </c:choose>
                            </div>
                        </div>

                        <!-- 诊断结果 -->
                        <div class="card mb-4">
                            <div class="card-header bg-info text-white">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-diagnoses"></i> 诊断结果
                                </h5>
                            </div>
                            <div class="card-body">
                                <c:choose>
                                    <c:when test="${not empty healthRecord.diagnosis}">
                                        <div class="alert alert-light border-start border-info border-4">
                                            <p class="mb-0" style="white-space: pre-wrap; line-height: 1.6;">${healthRecord.diagnosis}</p>
                                        </div>
                                    </c:when>
                                    <c:otherwise>
                                        <p class="text-muted text-center py-3 mb-0">
                                            <i class="fas fa-info-circle"></i> 暂无诊断结果
                                        </p>
                                    </c:otherwise>
                                </c:choose>
                            </div>
                        </div>

                        <!-- 治疗方案 -->
                        <div class="card mb-4">
                            <div class="card-header bg-success text-white">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-procedures"></i> 治疗方案
                                </h5>
                            </div>
                            <div class="card-body">
                                <c:choose>
                                    <c:when test="${not empty healthRecord.treatment}">
                                        <div class="alert alert-light border-start border-success border-4">
                                            <p class="mb-0" style="white-space: pre-wrap; line-height: 1.6;">${healthRecord.treatment}</p>
                                        </div>
                                    </c:when>
                                    <c:otherwise>
                                        <p class="text-muted text-center py-3 mb-0">
                                            <i class="fas fa-info-circle"></i> 暂无治疗方案
                                        </p>
                                    </c:otherwise>
                                </c:choose>
                            </div>
                        </div>

                        <!-- 用药记录 -->
                        <div class="card mb-4">
                            <div class="card-header bg-danger text-white">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-pills"></i> 用药记录
                                </h5>
                            </div>
                            <div class="card-body">
                                <c:choose>
                                    <c:when test="${not empty healthRecord.medication}">
                                        <div class="alert alert-light border-start border-danger border-4">
                                            <p class="mb-0" style="white-space: pre-wrap; line-height: 1.6;">${healthRecord.medication}</p>
                                        </div>
                                    </c:when>
                                    <c:otherwise>
                                        <p class="text-muted text-center py-3 mb-0">
                                            <i class="fas fa-info-circle"></i> 暂无用药记录
                                        </p>
                                    </c:otherwise>
                                </c:choose>
                            </div>
                        </div>

                        <!-- 备注信息 -->
                        <c:if test="${not empty healthRecord.notes}">
                            <div class="card mb-4">
                                <div class="card-header bg-secondary text-white">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-sticky-note"></i> 备注信息
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="alert alert-light border-start border-secondary border-4">
                                        <p class="mb-0" style="white-space: pre-wrap; line-height: 1.6;">${healthRecord.notes}</p>
                                    </div>
                                </div>
                            </div>
                        </c:if>
                    </div>

                    <!-- 侧边栏信息 -->
                    <div class="col-lg-4">
                        <!-- 宠物信息卡片 -->
                        <div class="card mb-4 shadow-sm">
                            <div class="card-header bg-primary text-white">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-paw"></i> ${healthRecord.pet.petName}
                                </h5>
                            </div>
                            <div class="card-body text-center">
                                <div class="mb-3">
                                    <c:choose>
                                        <c:when test="${not empty healthRecord.pet.photoUrl}">
                                            <img src="${pageContext.request.contextPath}/${healthRecord.pet.photoUrl}" 
                                                 alt="${healthRecord.pet.petName}" class="img-fluid rounded-circle shadow" 
                                                 style="width: 120px; height: 120px; object-fit: cover;">
                                        </c:when>
                                        <c:otherwise>
                                            <div class="bg-light rounded-circle d-flex align-items-center justify-content-center shadow" 
                                                 style="width: 120px; height: 120px; margin: 0 auto;">
                                                <i class="fas fa-paw fa-3x text-muted"></i>
                                            </div>
                                        </c:otherwise>
                                    </c:choose>
                                </div>
                                <h5 class="text-primary">${healthRecord.pet.petName}</h5>
                                <p class="text-muted mb-3">${healthRecord.pet.petType} - ${healthRecord.pet.breed}</p>
                                
                                <div class="row text-center">
                                    <div class="col-6">
                                        <div class="border-end">
                                            <h6 class="text-muted mb-1">性别</h6>
                                            <p class="mb-0">
                                                <c:choose>
                                                    <c:when test="${healthRecord.pet.gender == 'male'}">
                                                        <i class="fas fa-mars text-primary"></i> 雄性
                                                    </c:when>
                                                    <c:when test="${healthRecord.pet.gender == 'female'}">
                                                        <i class="fas fa-venus text-danger"></i> 雌性
                                                    </c:when>
                                                    <c:otherwise>未知</c:otherwise>
                                                </c:choose>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <h6 class="text-muted mb-1">年龄</h6>
                                        <p class="mb-0">
                                            <c:choose>
                                                <c:when test="${not empty healthRecord.pet.age}">
                                                    ${healthRecord.pet.age}个月
                                                </c:when>
                                                <c:otherwise>未知</c:otherwise>
                                            </c:choose>
                                        </p>
                                    </div>
                                </div>
                                
                                <c:if test="${not empty healthRecord.pet.weight}">
                                    <div class="mt-3">
                                        <h6 class="text-muted mb-1">体重</h6>
                                        <p class="mb-0 fw-bold">${healthRecord.pet.weight} kg</p>
                                    </div>
                                </c:if>
                                
                                <div class="mt-3">
                                    <a href="${pageContext.request.contextPath}/pet/view?id=${healthRecord.pet.petId}" 
                                       class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-eye"></i> 查看宠物档案
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- 复诊提醒 -->
                        <c:if test="${healthRecord.needsFollowUp()}">
                            <div class="card mb-4 border-warning">
                                <div class="card-header bg-warning text-dark">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-bell"></i> 复诊提醒
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <p class="mb-2">
                                        <strong>复诊日期：</strong>
                                        <fmt:formatDate value="${healthRecord.nextVisitDate}" pattern="yyyy年MM月dd日"/>
                                    </p>
                                    <p class="text-muted mb-3">请按时带${healthRecord.pet.petName}来医院复诊。</p>
                                    <a href="${pageContext.request.contextPath}/appointment/add?petId=${healthRecord.pet.petId}" 
                                       class="btn btn-warning btn-sm">
                                        <i class="fas fa-calendar-plus"></i> 立即预约
                                    </a>
                                </div>
                            </div>
                        </c:if>

                        <!-- 快速操作 -->
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-bolt"></i> 快速操作
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="d-grid gap-2">
                                    <a href="${pageContext.request.contextPath}/health/my-records?petId=${healthRecord.pet.petId}" 
                                       class="btn btn-outline-primary">
                                        <i class="fas fa-history"></i> 查看历史记录
                                    </a>
                                    <a href="${pageContext.request.contextPath}/appointment/add?petId=${healthRecord.pet.petId}" 
                                       class="btn btn-outline-success">
                                        <i class="fas fa-calendar-plus"></i> 预约就诊
                                    </a>
                                    <a href="${pageContext.request.contextPath}/health/followUp" 
                                       class="btn btn-outline-warning">
                                        <i class="fas fa-bell"></i> 复诊提醒
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
